'use client';

import { useState, useEffect, useCallback } from 'react';
import { Testimonial } from '../testimonials/data';

// 评分星星组件
const StarRating = ({ rating }: { rating: number }) => {
  return (
    <div className="flex space-x-1">
      {[...Array(5)].map((_, i) => (
        <svg
          key={i}
          xmlns="http://www.w3.org/2000/svg"
          className={`h-4 w-4 ${
            i < rating ? 'text-yellow-400' : 'text-gray-300'
          }`}
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      ))}
    </div>
  );
};

type TestimonialCarouselProps = {
  testimonials: Testimonial[];
  autoPlayInterval?: number; // 自动播放间隔，单位毫秒
};

export default function TestimonialCarousel({
  testimonials,
  autoPlayInterval = 5000,
}: TestimonialCarouselProps) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [isPaused, setIsPaused] = useState(false);

  // 切换到下一个评价
  const nextTestimonial = useCallback(() => {
    setActiveIndex((current) => (current === testimonials.length - 1 ? 0 : current + 1));
  }, [testimonials.length]);

  // 切换到上一个评价
  const prevTestimonial = () => {
    setActiveIndex((current) => (current === 0 ? testimonials.length - 1 : current - 1));
  };

  // 直接跳转到指定评价
  const goToTestimonial = (index: number) => {
    setActiveIndex(index);
  };

  // 自动轮播
  useEffect(() => {
    if (isPaused) return;

    const intervalId = setInterval(() => {
      nextTestimonial();
    }, autoPlayInterval);

    return () => clearInterval(intervalId);
  }, [nextTestimonial, autoPlayInterval, isPaused]);

  if (!testimonials.length) return null;

  return (
    <div 
      className="relative overflow-hidden bg-white rounded-xl shadow-lg max-w-4xl mx-auto"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
    >
      <div className="relative h-full">
        {/* 轮播容器 */}
        <div className="relative overflow-hidden">
          <div 
            className="flex transition-transform duration-500 ease-in-out" 
            style={{ transform: `translateX(-${activeIndex * 100}%)` }}
          >
            {testimonials.map((testimonial, index) => (
              <div key={testimonial.id} className="w-full flex-shrink-0 p-8 md:p-12">
                {/* 评价内容 */}
                <div className="flex flex-col md:flex-row items-center md:items-start gap-6">
                  {/* 客户头像和信息 */}
                  <div className="flex flex-col items-center md:items-start">
                    <div className="w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden border-4 border-primary-100 mb-4">
                      <img 
                        src={testimonial.avatar || '/images/Photo01.jpg'} 
                        alt={testimonial.name} 
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <h3 className="text-lg font-semibold text-gray-800">{testimonial.name}</h3>
                    <div className="text-sm text-gray-600 mb-1">{testimonial.position}</div>
                    <div className="text-sm text-gray-500 mb-3">{testimonial.company}</div>
                    <StarRating rating={testimonial.rating} />
                  </div>
                  
                  {/* 评价文字 */}
                  <div className="flex-1">
                    <div className="text-primary-500 text-4xl mb-4">"</div>
                    <p className="text-gray-700 text-lg md:text-xl leading-relaxed mb-4">
                      {testimonial.content}
                    </p>
                    <div className="text-primary-500 text-4xl text-right">"</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 左右箭头 */}
        <button 
          onClick={prevTestimonial}
          className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary-600 hover:bg-primary-50 focus:outline-none"
        >
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button 
          onClick={nextTestimonial}
          className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-primary-600 hover:bg-primary-50 focus:outline-none"
        >
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>

      {/* 指示器 */}
      <div className="absolute bottom-4 left-0 right-0">
        <div className="flex justify-center space-x-2">
          {testimonials.map((_, index) => (
            <button
              key={index}
              onClick={() => goToTestimonial(index)}
              className={`w-2 h-2 rounded-full transition-all ${
                activeIndex === index
                  ? 'bg-primary-600 w-4'
                  : 'bg-gray-300 hover:bg-gray-400'
              }`}
              aria-label={`Go to testimonial ${index + 1}`}
            />
          ))}
        </div>
      </div>
    </div>
  );
} 